<template>
  <div>
    <div class="page-content-forms">
        <a-space>
            <div>
                <label>资金类型：</label>
                <a-select style="width: 220px" @change="money_type_Change" allowClear v-model="money_type">
                    <a-select-option :value="item.type" v-for="(item,index) in money_types" :key="index" >{{item.name}}</a-select-option>
                </a-select>
            </div>
            <div >
              <a-button type="primary" @click="ClickSearch" >查询</a-button>
            </div>
            <div >
              <a-button type="primary" @click="AddAsset" >添加</a-button>
            </div>
        </a-space>
    </div>
    <div class="page-content-table">
        <a-table :columns="columns" :data-source="table_data" bordered :pagination="task_pagination"  size="small"
        @change="changeEvent"
        >
        <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <a-descriptions title="其他信息" bordered="true" size="small"> 
            <a-descriptions-item label="备注信息" :span="1">{{record.info}}</a-descriptions-item>
          </a-descriptions>
        </p>
            <span slot="type2" slot-scope="text, record"> 
              <span class="menu-name">{{GetMoneyType(record.type)}}</span>
            </span>
            <span slot="money" slot-scope="text, record"> 
              <span class="menu-name">{{record.money}}</span>
            </span>
            <!--  -->
            <span slot="time2" slot-scope="text, record"> 
              <span class="menu-name">{{GetTime(record.time)}}</span>
            </span>
            <span slot="pre" slot-scope="text, record"> 
              <span class="menu-name">{{record.pre}}</span>
            </span>
            <span slot="lst" slot-scope="text, record"> 
              <span class="menu-name">{{record.lst}}</span>
            </span>
        </a-table>
    </div>
    <a-modal v-model="addAsset_visible" title="添加" 
      @ok="addAsset_ok"
      :maskClosable="false"
      okText="添加"
      okType="dashed"
      :destroyOnClose="true"
      cancelText='取消'
      cancelokType="dashed"
      @cancel="addAsset_cancle"
    >
    <a-row>
      <a-form :form="form" :label-col="{ span:6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="资产类型">
          <a-select style="width: 220px" allowClear v-decorator="['type', { rules: [{ required: true, message: '资产类型!' }] }]">
              <a-select-option :value="item.type" v-for="(item,index) in money_types" :key="index" >{{item.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="金额">
            <a-input placeholder="数字" v-decorator="['money', { rules: [{ required: false, message: '金额!' }] }]" allowClear style="width: 220px"/>
        </a-form-item>
        <a-form-item label="备注信息">
          <a-textarea  placeholder="请填写报销备注信息"   v-decorator="['info', { rules: [{ required: true, message: '备注信息!' }] }]"  :autoSize ="{ minRows: 4 }" allow-clear @change="change_data"></a-textarea >
        </a-form-item>
      </a-form>
    </a-row>
    </a-modal>
  </div>
</template>
<script>
const tasks_columns =[
  {
    title: '资金类型',
    scopedSlots: { customRender: 'type2' } ,
    width:300,
    align:'center'
  },
  {
    title: '金额',
    dataIndex: 'money',
    width:210,
    align:'center'
  },
  {
    title: '时间',
    scopedSlots: { customRender: 'time2' } ,
    key: 'id',
    width:150,
    align:'center'
  },
  {
    title: '上次剩余',
    scopedSlots: { customRender: 'pre' } ,
    key: 'id',
    width:210,
    align:'center'
  },
  {
    title: '本次剩余',
    scopedSlots: { customRender: 'lst' } ,
    key: 'id',
    width:210,
    align:'center'
  },
]
export default {
  data() {
    return {
        money_types:[
            {
                name:'输入',
                type:'in'
            },
            {
                name:'输出',
                type:'out'
            },
        ],
        money_type:'',
        columns:tasks_columns,
        task_pagination:{
          size:'small',
          pageSize:15,
          total:0,
          showTotal:(total, range)=>{
            return `共 ${total} 个，当前${range[0]}-${range[1]}`
          },
          ucurrent:1,
        },
        table_data:[],
        addAsset_visible:false,
        form: this.$form.createForm(this, { name: 'form' }),
    }
  },
  methods: {
    GetMoneyType(_type){
        let _index=this.money_types.findIndex((_value)=>{
            return _value.type==_type
        })
        if(_index>=0){
            return this.money_types[_index].name
        }
        else{
            return ''
        }
    },
    ClickSearch(){
      this.search();
    },
    money_type_Change(){
      this.search();
    },
    search(pagenum=1){
      this.table_data=[]
       let qs={
        pagesize:this.task_pagination.pageSize,
        pagenum,
        type:this.money_type,
      }
      this.$common_apis.axios_get("/get_moneys?",qs,true).then(result => {
        if(result){
          let _data=result.data
          _data.forEach((_featrue,index)=>{
            _featrue.key=index
          })
          this.table_data=_data
          this.task_pagination.total=result.page.count
        }
      });
    },
    changeEvent(pagination){
      this.search(pagination.current)
      this.task_pagination.ucurrent=pagination.current
    },
    async AddAsset(){
      this.addAsset_visible=true
      let WaitAddAsset =new Promise((resolve)=>{this.AddAsset_resolve=resolve;});
      let _WaitAddAsset=await WaitAddAsset
      if(_WaitAddAsset){
        this.$common_apis.axios_post("/add_moneys?",_WaitAddAsset,true)
        .then(res => {
          if (res) {
            this.search(this.task_pagination.ucurrent);
          }
        });
        return true
      }
      return false
    },
    addAsset_ok(){
      this.form.validateFields((err, values) => {
        if (!err) {
            if(isNaN(values.money)==false){
                this.AddAsset_resolve(values);
                this.addAsset_visible=false
            }
            else{
                this.$message.info('金额必须是数字');
            }
        }
        else{
          this.$message.info('完整填写信息');
        }
      });
    },
    addAsset_cancle(){
      this.addAsset_visible=false
      this.AddAsset_resolve(false);
    },
  },
}
</script>